import React, { useState } from 'react';
import request from '@/utils/request'
import {Table,Button,Popconfirm,message} from 'antd'

class List extends React.Component{
   state={
       page:1,
       size:5,
       datalist:[],
       total:0,
       selectIds:[],
   }
      getData=async()=>{
          const{username,password}=this.state;
          const {data}=await request.get('/users/list',{
              params:{
                  username,
                  password
              }
          })
        //   console.log('data=',data);
         this.setState({
             datalist:data,
         })
          
      }
      //单个删除功能
      removeItem=async(id)=>{          
          console.log(id);
         const {data}=await request.post('/users/del',{
            username:[id]
         })
         console.log(data);
          if(data.code===200){
              message.success('删除数据成功');
              this.getData();
          }      
      }
      //多个删除
      delectItem=async()=>{
         
          const {data}=await request.post('/users/del',{
            username:this.state.selectIds       
         })

         if(data.code===200){
            message.success('删除数据成功');
            console.log(this.state.selectIds);
            this.getData();
        }     
      }                                                                        
      componentDidMount(){
          this.getData();
      }
    render(){
        //解构
        const {datalist,total,size}=this.state;

        const columns = [
            {
                 //设置表头
                title: '用户',    
                //设置当前列显示什么数据
                dataIndex: 'username',    
                // key: 'name',    
               width:100,
            },       
            {
                title: '密码',
                //dataIndex不写时，要加上key
                dataIndex: 'password',
                width:100,              
                
            },
            
            {
                title: '操作',
                width:80,
                render:(row)=>{
                    return (
                        <>
                        <Popconfirm title="您确定要删除吗？" onConfirm={() => {
                                this.removeItem(row.username)
                            }}>
                                <Button danger size='small' >删除</Button>
                            </Popconfirm>
                        </>
                    )
                }
            }
        ]
        //全选框
        const rowSelection={
            type:'checkbox',
            onChange:(selectedRowKeys,selectedRows)=>{
                console.log(selectedRowKeys);
                 this.setState({
                     selectIds:selectedRowKeys
                 })
            }
        }
        //翻页
        const pagination={
            size:'small',
            total:total,
            pageSize:size,
            showTotal(total,range){
                return `共${total}条数据`
            },
            showSizeChanger:true,
            onChange:(page,pageSize)=>{
               
                this.setState({
                    page,
                    size:pageSize,
                },()=>{
                    this.getData();
                })
            }
        }
        return (
        <div style={{width:500}}>
            <Table
                    rowKey='username'
                    columns={columns}
                    dataSource={datalist}
                    pagination={pagination}
                    rowSelection={rowSelection}
                    scroll={{y:400}}
                />
                <Popconfirm title="您确定要删除吗？" onConfirm={() => {
                                this.delectItem()
                            }}>
                   <Button danger size='small' style={{marginLeft:430}} >删除所选</Button>
                </Popconfirm>
        </div>
        )
    }

    
}

export default List;